<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 眼底随访系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-50 min-vh-100 d-flex flex-column justify-center">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="/">
                <img src="/static/images/logo.png" alt="Logo" class="rounded-circle me-2" width="40" height="40">
                <span class="font-bold text-primary">眼底随访系统</span>
            </a>
            <div class="navbar-nav ms-auto">
                <a class="nav-item nav-link text-primary hover:text-primary/80 transition-colors duration-300" href="/">返回主页</a>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="flex-grow-1 container my-16">
        <div class="card w-100 max-w-sm mx-auto p-8 shadow-lg rounded-xl fade-up" style="animation-delay: 0.1s">
            <div class="text-center mb-6 fade-up" style="animation-delay: 0.2s">
                <img src="/static/images/logo.png" alt="Logo" class="rounded-circle mb-4" width="100" height="100">
                <h2 class="text-2xl font-bold text-primary">眼底随访系统</h2>
                <p class="text-gray-600 mt-2">专业的眼底疾病随访管理平台</p>
            </div>
            <form method="post" action="/login" class="fade-up" style="animation-delay: 0.3s">
                {% if error %}
                    <div class="alert alert-danger rounded-lg mb-4 p-3" role="alert">{{ error }}</div>
                {% endif %}
                <div class="mb-6">
                    <label for="username" class="form-label text-gray-700">用户名</label>
                    <input type="text" class="form-control rounded-lg border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-300 p-3" id="username" name="username" placeholder="请输入用户名" required>
                </div>
                <div class="mb-6">
                    <label for="password" class="form-label text-gray-700">密码</label>
                    <input type="password" class="form-control rounded-lg border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-300 p-3" id="password" name="password" placeholder="请输入密码" required>
                </div>
                <button type="submit" class="btn btn-primary rounded-full w-100 py-2 hover:shadow-lg hover:bg-primary/90 transition-all duration-300 mb-4 pulse">登录</button>
                <div class="text-center">
                    <a href="/" class="text-primary hover:underline transition-colors duration-300">返回主页</a>
                </div>
            </form>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white py-4 shadow-inner mt-auto">
        <div class="container text-center text-gray-600">
            <p>© 2025 眼底随访系统. 保留所有权利.</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
